<template>
  <div class="container">
    <div style="border-bottom:1px solid #ccc;padding-bottom:50px">
      <div class="card_nd_title">
        <span>体型对比</span>
        <div class="line" style="width:64px;"></div>
      </div>
      <div class="card_content">
        <div style="display:flex;justify-content: space-around;margin-bottom:30px">
          <img v-for="item in report.reportContent.basicInfo.patientBodyImage.split(',')" :src="item" :key="item" />
        </div>
        <div style="text-align:center;margin-bottom:30px">服务前</div>
        <div style="display:flex;justify-content: space-around;margin-bottom:30px">
          <j-image-upload
            v-if="status != 1"
            class="avatar-uploader"
            text="上传"
            v-model="report.monthInputUpdate.bodyPictures"
            :is-multiple="true"
            :preview="true"
          ></j-image-upload>
          <img v-for="item in report.monthInputUpdate.bodyPictures.split(',')" :src="item" :key="item" v-else />
        </div>
        <div style="text-align:center;margin-bottom:30px">服务后</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Body',
  props: ['report', 'status'],
  data() {
    return {
      images: null
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
@media print {
  .container {
    page-break-after: always;
  }
}
.container {
  padding: 50px 24px 0 24px;
}
.card_content {
  margin-top: 15px;
  img {
    width: 207px;
    height: 448px;
  }
}
.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
</style>

